<template>
  <el-card>
    <template #header>
      <div style="float: right">
        <el-button @click="saveField" type="primary">提 交</el-button>
      </div>
    </template>
  </el-card>
  <el-scrollbar :height="h">
    <ts-card header="基础设置">
      <el-form v-if="form.options" :model="form" label-position="left">
        <sc-form ref="formRef" :config="formConfig" v-model="form.options">
          <template #content>
            <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
              <el-form-item label="名称">
                <el-input v-model="form.label"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
              <el-form-item label="控件属性名">
                <el-input v-model="form.vmodel" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
              <el-form-item label="控件类型">
                <el-select
                  v-model="form.component"
                  clearable
                  placeholder="请选择："
                  @change="compoentTypeChange"
                >
                  <el-option
                    v-for="item in configData.componentList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
              <el-form-item label="组合类型">
                <el-select
                  v-model="form.pattern"
                  clearable
                  placeholder="请选择："
                  :disabled="
                    form.component !== 'datePicker' &&
                    form.component !== 'inputNumber'
                  "
                  @change="compoentTypeChange"
                >
                  <el-option
                    v-for="item in patternList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
              <el-form-item label="大小">
                <el-select v-model="form.size" clearable placeholder="请选择：">
                  <el-option
                    v-for="item in configData.sizeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
              <el-form-item label="是否必填">
                <el-switch v-model="form.required" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
              <el-form-item label="失效状态">
                <el-switch v-model="form.disabled" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
              <el-form-item label="占位符">
                <el-input v-model="form.placeholder" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
              <el-form-item label="所占列数">
                <el-input-number v-model="form.span"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
              <el-form-item label="关联其它字段">
                <el-input v-model="form.refOtherFields" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
              <el-form-item label="关联数据集">
                <el-input v-model="form.tableId" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
              <el-form-item label="默认值">
                <el-input v-model="form.defaultValue" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
              <el-form-item label="顺序">
                <el-input-number v-model="form.itemIndex" />
              </el-form-item>
            </el-col>
          </template>
        </sc-form>
        <!-- <el-row>
                <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
                    <el-form-item label="数据集设置">
                        <el-select v-model="form.options.dbServiceList" clearable placeholder="请选择：">
                            <el-option v-for="item in configData.sizeList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row> -->
      </el-form>
    </ts-card>
    <ts-card header="自定义属性" style="margin-top: 20px">
      <sc-form-table
        v-model="cloneAttributes"
        :addTemplate="attributesTemplate"
        height="300"
      >
        <el-table-column label="key" width="160">
          <template #default="scope">
            <el-input v-model="scope.row.key"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="值">
          <template #default="scope">
            <el-input style="width: 100%" v-model="scope.row.value" />
          </template>
        </el-table-column>
      </sc-form-table>
    </ts-card>
    <ts-card
      v-if="checkCompoent(form.component)"
      header="数据集对象设置"
      style="margin-top: 10px"
    >
      <dataSet
        v-model:formData="form.dataset"
        :configData="configData"
      ></dataSet>
    </ts-card>
  </el-scrollbar>
</template>
<script setup>
import { ref, defineModel, computed, onMounted } from "vue";
import { getFormConfig } from "./formConfig.js";
import { ElNotification } from "element-plus";
import API from "@/api/model/report.js";
import dataSet from "./dataSet.vue";
import tool from "../utils/tool";
import { deepClone } from "@/utils/arr.js";
const emit = defineEmits(["update",'init']);
const form = defineModel("formData");
const formConfig = ref({});
const cloneAttributes = ref([]);
const props = defineProps({
  configData: { type: Array, default: [] },
  fileName: { type: String, default: "" },
});
const h = computed(() => {
  var elementHeight = document.querySelector(".el-main").offsetHeight;
  return elementHeight + "px";
});
const patternList = [
  { value: "simple", label: "简单" },
  { value: "complex", label: "复杂" },
];
const attributesTemplate = { key: "", value: "" };
onMounted(() => {
  cloneAttributes.value = deepClone(
    form.value.cloneAttributes ? form.value.cloneAttributes : []
  );
});
const compoentTypeChange = () => {
  let type;
  if (
    form.value.component == "inputNumber" ||
    form.value.component == "datePicker"
  ) {
    type = form.value.component + "-" + form.value.pattern;
  } else {
    type = form.value.component;
  }
  formConfig.value = getFormConfig(type, props.configData)?getFormConfig(type, props.configData):{};
};
const saveField = async () => {
  let formData = deepClone(form.value)
  formData.cloneAttributes = tool.convert.arrToMap(cloneAttributes.value);
  if (formData.dataset&&formData.dataset.injectionConditionMap) {
    formData.dataset.injectionConditionMap = tool.convert.arrToMap(
      formData.dataset.injectionConditionMap
    );
  }
  let param = {
    fileName: props.fileName,
    bean: formData,
  };
  let res = await API.update.post(param);
  if (res.code == 200) {
    ElNotification.success({
      title: "",
      message: "操作成功！",
      duration: 2000,
    });
    emit("update", form.value);
    emit('init')
  }
};
const checkCompoent = (val) => {
  let arr = ["select", "treeSelect", "cascader"];
  if (arr.indexOf(val) == -1) {
    return false;
  }
  return true;
};
</script>
<style lang="less" scoped></style>
